const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.css$/,
                use: [
                  'vue-style-loader',
                  'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                  "style-loader",
                  "css-loader",
                  "less-loader",
                ]
            },
            {
                test: /.png$/,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                        esModule: false,
                      }
                    }
                ]
            },
            {
              test: /.js$/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            },
            {
              test: /\.js$/,
              use: 'eslint-loader',
              enforce: 'pre'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title: 'Webpack Vue Sample',
            BASE_URL: './',
            meta: {
              viewport: 'width=device-width'
            },
            template: './public/index.html'
        }),
        new StylelintPlugin({
          'files': ['**/*.{html,vue,css,less}'],
          'fix': false,
          'cache': true,
          'emitErrors': true,
          'failOnError': false
        })
    ]
}